<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        .ok{
            color:green;
        }
        .error{
            color:red;
        }
    </style>
</head>
<body>
    <div id="d1">
        <!--<img v-bind:src="url" alt="图片加载失败">-->
        <!--<img :src="url" alt="图片加载失败">-->

        <!--<input type="text" :class="{ok:flag,error:!flag}" @input="click($event.target.value)"/><br/>-->

        <input type="text" v-model="username"/><br/>
        <input type="radio" value="1" v-model="sex"/>
        <input type="radio" value="0" v-model="sex"/><br/>
        <select v-model="edu">
            <option value="1">aaa</option>
            <option value="2">bbb</option>
            <option value="3">ccc</option>
        </select><br/>
        <input type="checkbox" value="1" v-model="hobbies"/>
        <input type="checkbox" value="2" v-model="hobbies"/>
        <input type="checkbox" value="3" v-model="hobbies"/><br/>
        <textarea rows="5" cols="20" v-model="description"></textarea>
    </div>
</body>
<script>
    new Vue({
        el:"#d1",
        data:{
            url:"https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF",
            flag:true,
            username:"abc",
            sex:0,
            edu:2,
            hobbies:[1,3],
            description:"asdfasdfdasfdasf",
        },
        methods:{
            click(value){
                this.flag=value.length>=2&&value.length<=6;
            }
        }
    });
</script>
</html>